<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>头像上传</title>
    <link rel="stylesheet" href="{{ assert(path='admin/component/pear/css/pear.css') | safe }}" />
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs9">
            <div style="height:325px;background-color: rgb(247, 247, 247);">
                <img id="sourceImage" src="">
            </div>
        </div>
        <div class="layui-col-xs3" style="padding-left:0px;">
            <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
                <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
                <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
                <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
            </div>
            <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
        </div>
    </div>

    <script src="{{ assert(path='admin/component/layui/layui.js') | safe }}"></script>
    <script src="{{ assert(path='admin/component/pear/pear.js') | safe }}"></script>
    <script>
        layui.use(['jquery','layer','cropper'], function () {
            let $ = layui.jquery;
            let layer = layui.layer;
            let cropper = layui.cropper;

            var options = {
                aspectRatio: 1 / 1, // 裁剪框比例
                preview: '#previewImage', // 预览div
                viewmode: 1
            };
            
            $("#sourceImage").cropper(options);

            window.submitForm = function () {
                $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
                $("#sourceImage").cropper("getCroppedCanvas", {
                    width: 280,
                    height: 140
                }).toBlob(function (blob) {
                    var timeStamp = Date.parse(new Date());
                    var fileName = timeStamp + '.jpg';
                    var formData = new FormData();
                    formData.append('file', blob, fileName);
                    formData.append('fileName', fileName);
                    
					$.ajax({
                        method: "post",
                        url: "{{ url_for(name='admin.upload-avatar') | safe }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        type: 'post',
                        success: function (result) {
                            if (result.code == 0) {
                                $.ajax({
                                    url: "{{ url_for(name='admin.profile-avatar') | safe }}",
                                    data: {
                                        avatar: result.data.url,
                                    },
                                    dataType:'json',
                                    type:'post',
                                    success:function(result) {
                                        if (result.code == 0) {
                                            var reader = new FileReader();
                                            reader.readAsDataURL(blob);
                                            reader.onload = function (e) {
                                                var data = {
                                                    index: parent.layer.getFrameIndex(window.name),
                                                    newAvatar : e.target.result
                                                };

                                                layer.msg(result.message, {icon:1,time:1000}, function() {
                                                    parent.window.callback(data);
                                                });
                                            };
                                        } else {
                                            layer.msg(result.message, {icon:2,time:1000});
                                        }
                                    }
                                });
                            } else {
                                layer.msg(result.message, {icon:2,time:1000});
                            }

                        }
                    });
                    
                });
            }

            $(".pear-btn").on('click', function () {
                var event = $(this).attr("cropper-event");

                if (event === 'rotate') {
                    var option = $(this).attr('data-option');
                    $("#sourceImage").cropper('rotate', option);
                } else if (event === 'reset') {
                    $("#sourceImage").cropper('reset');
                }

                $("#uploadPicture").change(function () {
                    var r = new FileReader();
                    var f = this.files[0];

                    var uploadFileSize = f.size / 1024;
                    if (uploadFileSize > 5120) {
                        parent.layer.msg("上传文件不得超过5m", { icon: 5 });
                        return false;
                    }

                    r.readAsDataURL(f);
                    r.onload = function (e) {
                        $("#sourceImage")
                            .cropper('destroy')
                            .attr('src', this.result)
                            .cropper(options);
                    };
                });
            });
        });
    </script>
</body>

</html>